<template>
    <div style="width: 100%;height: 100%;position: relative">
        <div id="cesiumContainer"></div>
        <div style="position: absolute;top:50px;right: 50px;">
            <el-slider @change="handleZenith" :min="0" :max="10" step="0.1" v-model="luminanceAtZenith">Luminance at
                Zenith
            </el-slider>
            <el-checkbox @change="checkEnvironment" v-model="checked">Use procedural environment lighting</el-checkbox>
        </div>
    </div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    const environmentMapURL =
        "https://cesium.com/public/SandcastleSampleData/kiara_6_afternoon_2k_ibl.ktx2";
    const modelURL = "http://localhost:8888/model/SampleData/models/Pawns/Pawns.glb";

    const L00 = new Cesium.Cartesian3(
        1.234709620475769,
        1.221461296081543,
        1.273156881332397
    );
    const L1_1 = new Cesium.Cartesian3(
        1.135921120643616,
        1.171217799186707,
        1.287644743919373
    );
    const L10 = new Cesium.Cartesian3(
        1.245193719863892,
        1.245591878890991,
        1.282818794250488
    );
    const L11 = new Cesium.Cartesian3(
        -1.106930732727051,
        -1.112522482872009,
        -1.153198838233948
    );
    const L2_2 = new Cesium.Cartesian3(
        -1.086226940155029,
        -1.079731941223145,
        -1.101912498474121
    );
    const L2_1 = new Cesium.Cartesian3(
        1.189834713935852,
        1.185906887054443,
        1.214385271072388
    );
    const L20 = new Cesium.Cartesian3(
        0.01778045296669,
        0.02013735473156,
        0.025313569232821
    );
    const L21 = new Cesium.Cartesian3(
        -1.086826920509338,
        -1.084611177444458,
        -1.111204028129578
    );
    const L22 = new Cesium.Cartesian3(
        -0.05241484940052,
        -0.048303380608559,
        -0.041960217058659
    );
    const coefficients = [L00, L1_1, L10, L11, L2_2, L2_1, L20, L21, L22];
    export default {
        name: 'ImageBasedLighting',
        data() {
            return {
                checked: true,
                luminanceAtZenith: 0.2
            }
        },
        mounted() {
            this.initCesium();
            this.addImageBasedLighting();
        },
        methods: {
            initCesium: function () {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: false,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: false,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: false,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    })
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addImageBasedLighting() {
                const height = 0.0;
                const hpr = new Cesium.HeadingPitchRoll(0.0, 0.0, 0.0);
                const origin = Cesium.Cartesian3.fromDegrees(
                    -123.0744619,
                    44.0503706,
                    height
                );
                const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(
                    origin,
                    hpr
                );

                const model = this.viewer.scene.primitives.add(
                    Cesium.Model.fromGltf({
                        url: modelURL,
                        modelMatrix: modelMatrix,
                        minimumPixelSize: 128,
                    })
                );
                model.readyPromise
                    .then(model => {
                        const camera = this.viewer.camera;
                        // Zoom to model
                        const controller = this.viewer.scene.screenSpaceCameraController;
                        const r =
                            2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
                        controller.minimumZoomDistance = r * 0.5;

                        const center = Cesium.Matrix4.multiplyByPoint(
                            model.modelMatrix,
                            model.boundingSphere.center,
                            new Cesium.Cartesian3()
                        );
                        const heading = Cesium.Math.toRadians(230.0);
                        const pitch = Cesium.Math.toRadians(-20.0);
                        camera.lookAt(
                            center,
                            new Cesium.HeadingPitchRange(heading, pitch, r * 2.0)
                        );
                        camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

                        this.ibl = model.imageBasedLighting;
                        this.ibl.sphericalHarmonicCoefficients = coefficients;
                        this.ibl.specularEnvironmentMaps = environmentMapURL;
                    })
                    .catch(function (error) {
                        window.alert(error);
                    });
            },
            handleZenith(value) {
                this.ibl.luminanceAtZenith = value;
            },
            checkEnvironment(value) {
                if (!value) {
                    this.ibl.sphericalHarmonicCoefficients = coefficients;
                    this.ibl.specularEnvironmentMaps = environmentMapURL;
                } else {
                    this.ibl.sphericalHarmonicCoefficients = undefined;
                    this.ibl.specularEnvironmentMaps = undefined;
                }
            }
        },

    }
</script>

